<template>
  <div>
    <!-- 上层面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片card区域  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="8">
            <el-input
              placeholder="请输入查询内容"
              size="normal"
              clearable
              v-model="queryInfo.query"
              @clear="getGoodsData"
            ></el-input>
          </el-col>

          <el-col :span="16">
            <el-button
              size="default"
              icon="el-icon-search"
              @click="getGoodsData">
              </el-button>
            <el-button type="primary" size="default" @click="addGoods">添加商品</el-button
            ></el-col
          >
        </el-row>
      </div>
 

    <!-- table区域 -->
    <el-table :data="goodsData" style="width: 100%" stripe>
      <el-table-column type="index" label="#" width="180"> </el-table-column>

      <el-table-column prop="goods_name" label="商品名称" width="700">
      </el-table-column>

      <el-table-column prop="goods_price" label="商品价格(元)" width="120">
      </el-table-column>

      <el-table-column prop="goods_weight" label="商品重量"> </el-table-column>

      <el-table-column prop="add_time" label="创建时间">
        <template slot-scope="scope">
          {{scope.row.add_time*1000|dateFormat('')}}
          <!-- 坑，这里的时间戳是秒，而add_time的值是毫秒，需要乘1000才能转换正常 -->
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
        <!-- 编辑商品按钮 -->
        <el-button type="primary" size="default" icon="el-icon-edit" @click="editGoods(scope.row.goods_id)"></el-button>
      <!-- 删除商品按钮 -->
      <el-button type="danger" size="default" @click="deleteGoods(scope.row.goods_id)" icon="el-icon-delete"></el-button>
      </template>
      </el-table-column>
    </el-table>

  <div class="block">

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"     
      :page-sizes="[5, 10, 30, 50,100]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total='this.total'>
    </el-pagination>
  </div>


<!-- 编辑商品列表Dialog -->
<el-dialog
  title="编辑"
  :visible.sync="editGoodsDialogVisible"
  width="30%">
  <span>编辑商品</span>

<el-form-item label="活动名称">
   
  </el-form-item>

  <span slot="footer" class="dialog-footer">
    <el-button @click="editGoodsDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editGoodsDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
   </el-card>
<!--  -->

  </div>
</template>



<script>




export default {
  data() {
    return {
      total:10,//总共商品条数
      queryInfo: {//get请求参数，查询文字 页数 每页显示多少个
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      goodsData: [],//存储res.data.goods
      //
      editGoodsDialogVisible:false,//弹出Dialog

      editGoodsInfo:{
        id:'',
        goods_Name:'',
        goods_price:'',
        goods_weight:'',
        add_time:''
      },

    /*   addGoodsInfo:{
         goods_Name:'',
         goods_cat:'',
        goods_price:'',
        goods_number:'',
        goods_weight:'',
     
        
      } */
    };
  },

  methods: {
    async getGoodsData() {
      const { data: res } = await this.$http.get(`goods`, {
        params: this.queryInfo,
      });

      if (res.meta.status != 200) {
        return this.$message.error("get请求goods数据失败");
      } else {
        this.goodsData = res.data.goods;
        this.total = res.data.total;

        console.log(this.goodsData);
        return this.$message.success("get请求goods数据成功");
      }
    },
// 分页
      handleSizeChange(val) {
       this.queryInfo.pagesize=val;//
       this.getGoodsData();
      },
      handleCurrentChange(val) {
        this.queryInfo.pagenum=val;
         this.getGoodsData();
      },
      
      //删除goods商品按钮
       editGoods(){
      this.editGoodsDialogVisible=true;
    },

// 删除商品
    async deleteGoods(id){
   const confirmResult= await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err =>err)

        if(confirmResult!='confirm'){
          return this.$message.info('已取消删除')}

         const {data:res} = await this.$http.delete(`goods/${id}`)
        console.log(res);
        if(res.meta.status!==200){
         return  this.$message.error('delete删除货物错误')
        } else{
           this.$message.success('delete删除货物成功')
        }
          this.getGoodsData();
        },
      
  // 跳转添加商品页
  addGoods(){
    this.$router.push('goods/add')
  }
    
  

     
      
  },
  

   

  created() {
    this.getGoodsData();
    console.log(this.goodsData);
  },
};
</script>

<style lang="less">
</style>